<template>
    <div class="page-container-inner">
        <h4 class="text-lg p-1 pb-0">{{ $t('game.setting.broadcast.title') }}</h4>
        <div class="py-8 text-center" v-if="['loading', 'error'].indexOf(dataStatus) >= 0">
            <component-page-loading :status="dataStatus" @reload="getData"></component-page-loading>
        </div>
        <div class="py-8" v-else>
            <!--显示-->
            <div v-if="!dataEditStatus">
                <div class="text-center" v-if="data.id == null">
                    <component-page-loading status="nodata" nodata-init @create="editData"></component-page-loading>
                </div>
                <el-form label-width="180px" class="detail pr-20" v-else>
                    <el-form-item :label="$t('game.setting.broadcast.enable')">
                        <el-tag effect="plain" size="mini" :type="!data.enable ? 'danger' : 'success'">
                            {{ $t(`form.switchList.${data.enable}.label`) }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.broadcast.expire_time.title')">
                        <el-tag effect="plain" size="mini" type="info" v-if="data.expire_time == null">
                            {{ $t('game.setting.broadcast.expire_time.never') }}
                        </el-tag>
                        <component-page-timestamp :timestamp="data.expire_time" v-else></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.broadcast.content')">
                        <div v-if="!data.contents.length">----</div>
                        <div v-for="item in data.contents" v-html="item.content_format" class="break-words"></div>
                    </el-form-item>
                    <!--操作-->
                    <el-form-item>
                        <el-button @click="editData">{{ $t('action.edit') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--编辑-->
            <div v-else>
                <el-form label-width="180px" :model="dataCache" class="pr-20">
                    <el-form-item :label="$t('game.setting.broadcast.enable')"
                                  :error="Boolean(msg.errors['enable']) ? msg.errors['enable'][0] : ''">
                        <el-switch :inactive-value="0" :active-value="1" v-model="dataCache.enable"></el-switch>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.broadcast.expire_time.title')"
                                  :error="Boolean(msg.errors['expire_time']) ? msg.errors['expire_time'][0] : ''">
                        <component-page-option-datetime v-model="dataCache.expire_time" type="datetime"></component-page-option-datetime>
                    </el-form-item>
                    <!--内容-->
                    <el-form-item v-for="(item,index) in dataCache.content_ids" :key="`content.${index}`"
                                  :label="!index ? $t('game.setting.broadcast.content') : ''" required
                                  :error="Boolean(msg.errors[`content_ids.${index}`]) ? msg.errors[`content_ids.${index}`][0] : ''">
                        <el-col :span="22">
                            <component-page-selection-dictionary v-model="dataCache.content_ids[index]"></component-page-selection-dictionary>
                        </el-col>
                        <el-col :span="2" class="text-right">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.content_ids, index)"></el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item :label="!dataCache.content_ids.length ? $t('game.setting.broadcast.content') : ''">
                        <el-button size="small" @click="addItem(dataCache.content_ids,null)">{{ $t('action.add') }}</el-button>
                    </el-form-item>
                    <!--内容参数-->
                    <el-form-item :label="$t('game.setting.broadcast.content_param')" :error="error_content_param" :required="!!dataCache.content_param.length">
                        <el-input v-for="(param, index) in dataCache.content_param" :key="index"
                                  class="w-24" v-model="dataCache.content_param[index]"></el-input>
                        <el-button v-if="dataCache.content_param.length" size="small" icon="el-icon-close" circle
                                   @click="removeItem(dataCache.content_param,dataCache.content_param.length-1)"></el-button>
                        <span :class="{'block':dataCache.content_param.length}">
                            <el-button size="small" @click="addItem(dataCache.content_param,null)">{{ $t('action.add') }}</el-button>
                        </span>
                    </el-form-item>
                </el-form>
                <!--操作-->
                <el-form label-width="180px">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                        <el-button @click="dataEditStatus = false">{{ $t('action.cancel') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Broadcast",
    data() {
        return {
            dataStatus: 'dle',
            data: {
                enable: 0, // 启用状态
                expire_time: null, // 过期时间
                content_ids: [], // 内容字典ID
                content_param: [], // 内容参数
            },
            dataEditStatus: false,
            dataCache: {},
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    computed: {
        error_content_param: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'content_param')) {
                    return this.msg.errors[key][0];
                }
            }
        }
    },
    created() {
        // 获取数据
        this.getData();
    },
    methods: {
        getData() {
            this.dataStatus = 'loading';
            axios.get('/game/setting/maintenance/getBroadcast').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    if (response.data.resp_data.enable != null) {
                        this.data = response.data.resp_data;
                    }
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        editData() {
            // 重置验证
            this.initMsg();
            // 克隆数据
            this.dataCache = _.cloneDeep(this.data);
            // 编辑状态
            this.dataEditStatus = true;
        },
        addItem(configs, item) {
            configs.push(_.cloneDeep(item));
        },
        removeItem(configs, index) {
            configs.splice(index, 1);
        },
        removeItemOrAdd(configs, index, item) {
            this.removeItem(configs, index);
            if (!configs.length) {
                this.addItem(configs, item);
            }
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/maintenance/publishBroadcast', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    this.dataEditStatus = false;
                    // 更新数据
                    this.data = response.data.resp_data;
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>

</style>
